<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫雷游戏</title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        table {
            border-collapse: collapse;
        }

        td {
            width: 30px;
            height: 30px;
            border: 1px solid #ccc;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        td.revealed {
            background-color: #f3f4f6;
        }

        td:hover {
            background-color: #e5e7eb;
        }

        button {
            transition: background-color 0.2s ease;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
</head>

<body class="flex flex-col items-center justify-center h-screen bg-gray-100 font-sans">

<h1 class="text-4xl font-bold mb-6 text-gray-800">扫雷游戏</h1>
<div class="flex items-center mb-4">
    <span class="text-lg font-medium mr-2">剩余雷数: </span>
    <span id="mineCount" class="text-lg font-bold text-red-500">10</span>
</div>
<div id="board" class="shadow-md rounded-md overflow-hidden"></div>
<button id="restartButton" class="mt-6 px-6 py-3 bg-green-500 text-white rounded-md hidden"
        onclick="restartGame()">重新开始游戏</button>

<script>
  const ROWS = 10;
  const COLS = 10;
  const MINES = 10;
  let board = [];
  let revealed = [];
  let flagged = [];
  let gameOver = false;
  let firstClick = true;
  let mineCount = MINES;

  function initializeBoard() {
    board = [];
    revealed = [];
    flagged = [];
    mineCount = MINES;
    document.getElementById('mineCount').textContent = mineCount;
    for (let i = 0; i < ROWS; i++) {
      board[i] = [];
      revealed[i] = [];
      flagged[i] = [];
      for (let j = 0; j < COLS; j++) {
        board[i][j] = 0;
        revealed[i][j] = false;
        flagged[i][j] = false;
      }
    }
  }

  function placeMines(firstRow, firstCol) {
    let minesPlaced = 0;
    while (minesPlaced < MINES) {
      const row = Math.floor(Math.random() * ROWS);
      const col = Math.floor(Math.random() * COLS);
      if (board[row][col]!== -1 && (row!== firstRow || col!== firstCol)) {
        board[row][col] = -1;
        minesPlaced++;
        for (let i = Math.max(row - 1, 0); i <= Math.min(row + 1, ROWS - 1); i++) {
          for (let j = Math.max(col - 1, 0); j <= Math.min(col + 1, COLS - 1); j++) {
            if (board[i][j]!== -1) {
              board[i][j]++;
            }
          }
        }
      }
    }
  }

  function createBoardUI() {
    const boardElement = document.getElementById('board');
    const table = document.createElement('table');
    for (let i = 0; i < ROWS; i++) {
      const row = document.createElement('tr');
      for (let j = 0; j < COLS; j++) {
        const cell = document.createElement('td');
        cell.classList.add('bg-gray-200');
        cell.addEventListener('click', () => clickCell(i, j));
        cell.addEventListener('contextmenu', (e) => {
          e.preventDefault();
          flagCell(i, j);
        });
        row.appendChild(cell);
      }
      table.appendChild(row);
    }
    boardElement.appendChild(table);
  }

  function clickCell(row, col) {
    if (gameOver || revealed[row][col] || flagged[row][col]) return;
    if (firstClick) {
      placeMines(row, col);
      firstClick = false;
    }
    if (board[row][col] === -1) {
      gameOver = true;
      revealAllMines();
      showRestartButton();
      alert('游戏结束，你踩到雷了！');
    } else {
      revealed[row][col] = true;
      const cell = document.querySelector(`table tr:nth-child(${row + 1}) td:nth-child(${col + 1})`);
      cell.classList.remove('bg-gray-200');
      cell.classList.add('revealed');
      if (board[row][col] === 0) {
        floodFill(row, col);
      } else {
        cell.textContent = board[row][col];
      }
      checkWin();
    }
  }

  function flagCell(row, col) {
    if (gameOver || revealed[row][col]) return;
    flagged[row][col] =!flagged[row][col];
    const cell = document.querySelector(`table tr:nth-child(${row + 1}) td:nth-child(${col + 1})`);
    if (flagged[row][col]) {
      cell.textContent = '🚩';
      mineCount--;
    } else {
      cell.textContent = '';
      mineCount++;
    }
    document.getElementById('mineCount').textContent = mineCount;
    checkWin();
  }

  function floodFill(row, col) {
    for (let i = Math.max(row - 1, 0); i <= Math.min(row + 1, ROWS - 1); i++) {
      for (let j = Math.max(col - 1, 0); j <= Math.min(col + 1, COLS - 1); j++) {
        if (!revealed[i][j]) {
          clickCell(i, j);
        }
      }
    }
  }

  function revealAllMines() {
    for (let i = 0; i < ROWS; i++) {
      for (let j = 0; j < COLS; j++) {
        if (board[i][j] === -1) {
          const cell = document.querySelector(`table tr:nth-child(${i + 1}) td:nth-child(${j + 1})`);
          cell.textContent = '💣';
          cell.classList.remove('bg-gray-200');
          cell.classList.add('revealed');
        }
      }
    }
  }

  function checkWin() {
    let unrevealedCells = 0;
    for (let i = 0; i < ROWS; i++) {
      for (let j = 0; j < COLS; j++) {
        if (!revealed[i][j] && board[i][j]!== -1) {
          unrevealedCells++;
        }
      }
    }
    if (unrevealedCells === 0) {
      gameOver = true;
      showRestartButton();
      alert('恭喜你，游戏胜利！');
    }
  }

  function showRestartButton() {
    const restartButton = document.getElementById('restartButton');
    restartButton.classList.remove('hidden');
  }

  function restartGame() {
    const boardElement = document.getElementById('board');
    boardElement.innerHTML = '';
    const restartButton = document.getElementById('restartButton');
    restartButton.classList.add('hidden');
    gameOver = false;
    firstClick = true;
    initializeBoard();
    createBoardUI();
  }

  initializeBoard();
  createBoardUI();
</script>
</body>
</html>
